<template>
	<view>
		<view class="earnestMoney">
			<view class="main-box">
				<view class="head-box theme-colors z-padding-t-100 z-padding-b-100">
					<view class="money z-flex">
						<view class="z-margin-t-16">￥</view>
						<view class="z-font-64 num">
							{{ ensure_price }}
							<image class="answer" src="/static/index/answer.png" @tap.stop="infoTap"></image>
						</view>
					</view>
					<view class="bzj z-text-c">已缴纳保证金（元）</view>

					<view class="z-flex z-margin-t-40">
						<view class="account z-text-c z-margin-r-24" @tap="toBill">账户流水</view>
						<view class="tx z-text-c theme-color z-margin-r-24" @tap="withdraw">提现</view>
						<view class="tx z-text-c tx-log" @tap="withdrawLog">提现记录</view>
					</view>
				</view>

				<view class="centent-box">
					<view class="z-flex-c z-padding-t-40 money-box z-padding-lr-32">
						<view class="each-select z-margin-b-24" v-for="(item,index) in list">
							<view class="select-money z-text-c">
								￥
								<text class="z-font-36">{{ item.price }}</text>
							</view>
							<view class="grade z-margin-t-32 z-text-c" :style="'color:' + item">{{ item.name }}</view>
							<view class="jurisdiction z-margin-t-32 z-text-c">优先派单</view>
							<view class="astrict z-text-c">
								日限
								<text class="theme-color">{{ item.accept_nums }}</text>
								单
							</view>
						</view>
					</view>

					<view class="theme-color explain z-margin-t-40 z-text-c" @tap.stop="infoTap">保证金权益说明</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="order-btn-box z-flex-0 z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="z-btn" @tap="toRecharge">缴纳保证金</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from "../../utils/util"
export default {
	data() {
		return {
			grade: ['#B3704E', '#C79F33', '#824EB3'],
			list: [],
			info: '',
			safeBottom: `20px`,
			ensure_price:''
		};
	},
	onLoad(options) {
		this.getList();
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		// 充值
		toRecharge() {
			util.skip('/service/recharge/recharge');
		},
		// 账户流水
		toBill() {
			util.skip('/service/bill/bill');
		},
		withdraw() {
			util.skip('/service/withdraw/withdraw?type=3');
		},
		withdrawLog() {
			util.skip('/service/moneyRecord/moneyRecord?type=3');
		},
		getList() {
			this.http.get('ensure/skillensure').then((res) => {
				if (res.data.length === 0) {
					this.finish = true
				}
				let arr = this.list.concat(res.data);
				this.list = arr
			});
		},
		infoTap() {
			let id = uni.getStorageSync('config').skill_equity_info_id;
			util.skip('/service/info/info?id=' + id + '&name=保证金权益说明');
		},
		getInfo() {
			this.http.get('skill/skillindex').then((res) => {
				this.info = res.data
				this.ensure_price = this.info.skill.ensure_price
			});
		}
	}
};
</script>

<style>
.earnestMoney {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow-y: auto;
}

page {
	background-color: #edf1f4;
}

.money {
	color: #fff;
	font-size: 26rpx;
	font-weight: bold;
	color: #ffffff;
}
.num {
	position: relative;
}
.answer {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: -50rpx;
	top: -10rpx;
}

.bzj {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	padding-top: -20;
}

.account {
	width: 162rpx;
	height: 56rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	border: 1rpx solid #ffffff;
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 56rpx;
	box-sizing: border-box;
}

.tx {
	width: 162rpx;
	height: 56rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 22rpx;
	font-weight: 500;
	line-height: 56rpx;
	box-sizing: border-box;
}
.tx-log {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.centent-box {
	width: 750rpx;
	background: #edf1f4;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;
	top: -50rpx;
}

.each-select {
	width: 213rpx;
	height: 293rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin-right: 24rpx;
}

.each-select:nth-of-type(3n) {
	margin-right: 0;
}

.select-money {
	font-size: 22rpx;
	font-weight: bold;
	color: #203460;
	margin-top: 30rpx;
}

.grade {
	font-size: 30rpx;
	font-weight: bold;
	/* color: #B3704E; */
}

.jurisdiction {
	font-size: 26rpx;
	font-weight: 500;
	color: #1c274c;
}

.astrict {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	margin-top: 12rpx;
}

.explain {
	font-size: 24rpx;
	font-weight: 500;
	color: #1677ff;
}

.order-btn-box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	flex-shrink: 0;
	box-sizing: border-box;
}

.btn {
	width: 686rpx;
	height: 98rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 98rpx;
	margin: auto;
	margin-top: 14rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #ffffff;
}

.money-box {
	flex-wrap: wrap;
}
</style>
